<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/rp/common/taglib.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <base href="<%=basePath%>">
    
    <title>${ webpageTitle }</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<script src="rp/scripts/boot.js" type="text/javascript"></script>
	
	<style type="text/css">
	   	
    </style>
	
  </head>
  
  <body class="body-fit">
  	
  	<input id="roleId" type="hidden" value="<rp:User property="roleId"/>" />
  	<input id="basePath" type="hidden" value="<%= basePath %>" />
  	
  	<div class="mini-splitter" style="width: 100%; height: 100%;" borderStyle="border:0;">
	    <div size="150" showCollapseButton="true" minSize="120">
	    	
	    	<ul id="menuTree" class="mini-tree" url="rp/system/baseData/menuMng/getAllMenus" style="width:100%;height:100%;" 
			    showTreeIcon="true" textField="title" 
			    idField="id" resultAsTree="false"
			    expandOnLoad="0" onnodeclick="menuTreeNodeClick"> 
			</ul>
	    </div>
	    <div showCollapseButton="false">
	    	<div class="mini-toolbar" style="padding:1px;border-top:0;border-left:0;border-right:0;">
	    		<table style="width: 100%;">
	    			<tr>
		    			<td style="width:100%;">
		    				<a class="mini-button" onclick="addRootNode()"><i class="fa fa-plus fa-lg"></i> 添加根节点</a>
				  			<a class="mini-button" onclick="addChildNode()"><i class="fa fa-plus fa-lg"></i> 添加子节点</a>
					        <a class="mini-button" onclick="saveData()"><i class="fa fa-floppy-o fa-lg"></i> 保存</a>
					        <a class="mini-button mini-button-danger" onclick="removeRows()"><i class="fa fa-trash-o fa-lg"></i> 删除</a>
					        <a class="mini-button" onclick="exportMenuItem()"><i class="fa fa-sign-out fa-lg"></i> 导出</a>
							<a class="mini-button" onclick="importMenuItem()"><i class="fa fa-sign-in fa-lg"></i> 导入</a>
							<sec:authorize ifAllGranted="AUTH_SUPERADMIN">
								<a class="mini-button" onclick="openAllotMenusWindow()">按角色分配菜单</a>
							</sec:authorize>
		    			</td>
		    			<td style="white-space:nowrap;">
		    				
		    			</td>
	    			</tr>
	    		</table>               
            	
	        </div>
	        <div class="mini-fit">
	            <div id="menuItemTreeGrid" class="mini-treegrid" style="width:100%;height:100%;" borderStyle="border:0;"    
				    url="" showTreeIcon="true" 
				    treeColumn="text" idField="id" resultAsTree="false"  
				    allowResize="false" expandOnLoad="true"
		    		allowCellEdit="true" allowCellSelect="true" multiSelect="true"
		        	editNextOnEnterKey="true" editNextRowCell="true" allowCellValid="true"
		        	allowDrag="false" allowDrop="false" allowLeafDropIn="true" ondrop="treeGridOnDrop">
				    <div property="columns">
				        <div type="indexcolumn" headerAlign="center">序号</div>
				        <div type="checkcolumn" width="20"></div>
				        <div name="text" field="text" vtype="required" width="120" headerAlign="center">
				        	节点名称<input property="editor" class="mini-textbox" style="width:100%;" />
				        </div>  
				        <div name="iconCls" field="iconCls" width="80" headerAlign="center">
				        	图标
				        		<input property="editor" class="mini-textbox" style="width:100%;" />
				        </div>             
				        <div name="url" field="url" width="170" headerAlign="center">
				        	URL<input property="editor" class="mini-textbox" style="width:100%;" />
				        </div>
				        <div name="sort" field="sort" width="30" headerAlign="center">
				        	排序<input property="editor" class="mini-textbox" style="width:100%;" />
				        </div>
				        <!-- <div name="verifyClose" field="verifyClose" width="40" headerAlign="center" align="center" renderer="onCloseRenderer">
				        	提示关闭<input property="editor" class="mini-combobox" style="width:100%;" data="YesOrNo" />
				        </div> -->
				        <div name="enabled2" field="enabled2" width="40" headerAlign="center" align="center" renderer="onEnabledRenderer">
				        	激活<input property="editor" class="mini-combobox" style="width:100%;" data="Activates" />
				        </div>           
				    </div>
				</div>
	        </div>
	    </div>        
	</div>
  	
	<script type="text/javascript">
		var menuTree;
		var menuItemTreeGrid;
		
		$(function(){
			mini.parse();
			menuTree = mini.get("menuTree");
			menuItemTreeGrid = mini.get("menuItemTreeGrid");
		});
		
		function onCloseRenderer(e){
			var value = e.value;
			if(value){
				if(value == "1") {
					return "<span style='color: green;'>是</span>"
				}
				return "<span style='color: red;'>否</span>";
			}
			return "";
		}
		
		function menuTreeNodeClick(e){
			var node = e.node;
			//menuItemTree.load("system/baseData/menuMng/getMenuItems?menuId="+node.id);
			menuItemTreeGrid.setUrl("rp/system/baseData/menuMng/getMenuItems?menuId="+node.id);
		}

		//节点投放时发生
		function treeGridOnDrop(e){
			var dragNode = e.dragNode;
			var dropNode = e.dropNode;
			rp_ajax("rp/system/baseData/menuMng/moveMenuItem", 
					{dragMenuItemId:dragNode.id, dropMenuItemId:dropNode.id}, function(result){
				if(result == "success"){
					menuItemTreeGrid.reload();
				}else{
					mini.alert("节点移动失败");
				}
			});
		}
		
		function addRootNode() {
			
            var newNode = { text: "", url: $("#basePath").val() };
            menuItemTreeGrid.addNode(newNode, 2);
            menuItemTreeGrid.beginEditCell(newNode, "text");
        }
		
		function addChildNode(){
			var selectedNode = menuItemTreeGrid.getSelectedNode();
			if(!selectedNode){
				mini.alert("您未选中任何节点");
			}else{
				var newNode = { text: "" };
				menuItemTreeGrid.addNode(newNode, "add", selectedNode);
				menuItemTreeGrid.beginEditCell(newNode, "text");
			}
		}
        
        function menuItemTreeDbClick(e){
        	var node = e.node;
           	menuItemTree.beginEdit(node);
           	return;
        }
        
        function saveData() {
        	
        	menuItemTreeGrid.validate();
			if (menuItemTreeGrid.isValid() == false) {
                var error = menuItemTreeGrid.getCellErrors()[0];
                menuItemTreeGrid.beginEditCell(error.record, error.column);
                return;
            }
			var menuId = menuTree.getSelectedNode().id;
			var menuName = menuTree.getSelectedNode().name;
			var data = menuItemTreeGrid.getChanges();
            var json = rp_encode(data);
            menuItemTreeGrid.loading("保存中，请稍等......");
            rp_ajax("rp/system/baseData/menuMng/saveMenuItems", {data: json, menuId: menuId, menuName:menuName}, function(text){
            	menuItemTreeGrid.reload();
            });
        	/*var menuId = menuTree.getSelectedNode().id;
        	var data = menuItemTree.getData();
            var removed = menuItemTree.getChanges("removed");
            var paramsObj = {
                data: mini.encode(data),
                removed: mini.encode(removed),
                menuId: menuId
            }
            
            var msgid = mini.loading("数据保存中，请稍后......", "保存数据");
            rp_ajax("system/baseData/menuMng/saveMenuItems", paramsObj, function(text){
            	mini.hideMessageBox(msgid);
                menuItemTree.load("system/baseData/menuMng/getMenuItems?menuId="+menuId);
            });*/
        }
        
        function removeRows() {
			var rows = menuItemTreeGrid.getSelecteds();
			if (rows.length == 0) {
				mini.alert("请勾选需要删除的记录...");
			} else {
				mini.confirm("确定删除记录吗？", "友情提示", function(action) {
					if (action == "ok") {
						var json = rp_encode(rows);
						if (rows.length > 0) {
							rp_ajax("rp/system/baseData/menuMng/deleteMenuItems", {
								data : json
							}, function(result) {
								menuItemTreeGrid.reload();
							});
						}
					}
				});
			}
		}

        function exportMenuItem(){
	        var rows = grid.getSelecteds();
			if(rows.length <= 0){
				mini.alert("请勾选需要导出的菜单项");
				return false;
			}
   	        var json = rp_encode(rows);
			mini.open({
                url: "rp/common/exportData.jsp",
                title: "导出数据", 
                width: 800, 
                height: 360,
                showMaxButton: false,
                onload: function () {
                	var iframe = this.getIFrameEl();
                  	iframe.contentWindow.initTextarea(json);
                }
            });
        }

        function importMenuItem(){
	        
        }

        function exportMenuItem(){
			var rows = menuItemTreeGrid.getSelecteds();
			if(rows.length <= 0){
				mini.alert("请勾选需要导出的菜单项");
				return false;
			}
   	        var json = rp_encode(rows);
	   	    mini.open({
	            url: "rp/common/exportData.jsp",
	            title: "导出数据", 
	            width: 800, 
	            height: 355,
	            showMaxButton: false,
	            onload: function () {
	            	var iframe = this.getIFrameEl();
	               	iframe.contentWindow.initTextarea(json);
	            }
	        });
		}

		function importMenuItem(){
			mini.open({
                url: "rp/common/importData.jsp",
                title: "导入数据", 
                width: 800, 
                height: 340,
                showMaxButton: false,
                onload: function() {
                	var iframe = this.getIFrameEl();
                  	iframe.contentWindow.initImportUrl("rp/system/baseData/menuMng/importMenuItem");
                },
                ondestroy: function() {
                    menuItemTreeGrid.reload();
                }
            });
		}
		
		function openAllotMenusWindow(){
			mini.open({
				url: "rp/system/roleMng/showAllotMenus?roleId="+$("#roleId").val(),
				title: "分配菜单",
				width: 400,
				height: 500,
				onload: function () {
                	//var iframe = this.getIFrameEl();
                  	//iframe.contentWindow.setSelectData(row);
              	},
				ondestroy: function (action) {
                    
                }
			});
		}
        
	</script>
  </body>
</html>
